<template>
	<el-dialog :visible.sync="editVisible" :close-on-click-modal="false" width="450px">
		<div slot="title">
			{{ editTitle }}
		</div>
		<el-form ref="form" :model="form" :rules="formRule" label-width="110px" size="mini" class="form" label-position="left"
		 @submit.native.prevent v-loading="loading">
			<el-form-item label="名称" prop="name">
				<el-input class="short-input" v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="端口范围" prop="range">
				<el-input class="short-input" v-model="form.range"></el-input>
			</el-form-item>
		</el-form>
		<div class="dialog-footer" slot="footer">
			<el-button type="primary" size="small" class="sureBtn" @click="submitEdit('form')">确定</el-button>
			<el-button @click="editVisible = false" class="cancelBtn" size="small">取消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				loading: '',
				title: '',
				editVisible: false,
				editTitle: '',
				form: {
					name: '',
					range: '',
				},
				formRule: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur',
					}, ],
					range: [{
						required: true,
						message: '请输入端口范围',
						trigger: 'blur',
					}, ],
				},
				portList: [],
			}
		},
		created() {
			// if (this.fileList.length == 0) {
			//   this.title = '未选择任何文件'
			// }
		},
		methods: {
			showportlist() {
				this.editVisible = true
			},
			submitEdit(formName) {
				this.loading = true
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.createPortList()
						// this.editVisible = false
					} else {
						return false
					}
				})
			},
			async createPortList() {
				let _this = this
				let param = {
					name: _this.form.name,
					port_range: _this.form.range,
				}
				let res = await _this.$api.postRequest(param, 'createPortList')
				if (res.code == 500) {
					this.$parent.loading = false
					_this.$message({
						message: res.data.message,
						type: 'warning',
					})
					this.loading = false
				} else {
					_this.getPortList()
					this.loading = false
				}
			},
			async getPortList() {
				// console.log(1);
				let _this = this
				let param = {
					currentPage: '1',
					pageSize: 100000,
					entity: '',
				}
				let res = await _this.$api.postRequest(param, 'getPortList')
				res.list.forEach((item) => {
					let param = {
						value: item.portId,
						label: item.name,
					}
					_this.portList.push(param)
				})
				// _this.$parent.options = []
				if (_this.$parent.options.length > 0) {
					_this.$parent.options = []
				}
				_this.$parent.options = _this.portList
				//  else {
				//   _this.$parent.options = _this.portList
				// }

				this.$message({
					showClose: true,
					message: '新建端口集合成功',
					type: 'success',
				})
				this.editVisible = false
				this.$parent.loading = false
			},
		},
	}
</script>

<style lang="scss">
	.add {
		padding: 4px 4px;
		font-size: 13px;
		border-radius: 3px;
		margin-left: 2%;
	}
</style>
